<template>
  <s-page>
    <view class="container">
      <c-demo-block title="基础用法">
        <s-dropdown-menu>
          <s-dropdown-item v-model="value1" :options="options1" />
          <s-dropdown-item v-model="value2" :options="options2" />
        </s-dropdown-menu>
      </c-demo-block>

      <c-demo-block title="自定义菜单内容">
        <s-dropdown-menu>
          <s-dropdown-item v-model="value1" :options="options1" />
          <s-dropdown-item ref="dropdownItem" title="筛选">
            <s-cell title="包邮">
              <template #right>
                <s-switch v-model="switch1" size="48" active-color="#ee0a24" />
              </template>
            </s-cell>
            <s-cell title="团购">
              <template #right>
                <s-switch v-model="switch2" size="48" active-color="#ee0a24" />
              </template>
            </s-cell>
            <view style="padding: 20rpx 32rpx">
              <s-button type="danger" block shape="round" @click="onConfirm">
                确认
              </s-button>
            </view>
          </s-dropdown-item>
        </s-dropdown-menu>
      </c-demo-block>

      <c-demo-block title="自定义选中态颜色">
        <s-dropdown-menu active-color="red">
          <s-dropdown-item v-model="value1" :options="options1" />
          <s-dropdown-item v-model="value2" :options="options2" />
        </s-dropdown-menu>
      </c-demo-block>

      <c-demo-block title="向上展开">
        <s-dropdown-menu direction="up">
          <s-dropdown-item v-model="value1" :options="options1" />
          <s-dropdown-item v-model="value2" :options="options2" />
        </s-dropdown-menu>
      </c-demo-block>

      <c-demo-block title="禁用菜单">
        <s-dropdown-menu>
          <s-dropdown-item v-model="value1" disabled :options="options1" />
          <s-dropdown-item v-model="value2" disabled :options="options2" />
        </s-dropdown-menu>
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    value1: 0,
    options1: [
      { label: '全部商品', value: 0 },
      { label: '新款商品', value: 1 },
      { label: '活动商品', value: 2 },
    ],
    value2: 0,
    options2: [
      { label: '默认排序', value: 0 },
      { label: '好评排序', value: 1 },
      { label: '销量排序', value: 2 },
    ],
    switch1: true,
    switch2: false,
  }),
  onLoad() { },
  methods: {
    onConfirm() {
      this.$refs.dropdownItem.toggle();
    },
  },
};
</script>

<style lang="scss">
page {
  // background-color: $white;
}
</style>

<style lang="scss" scoped>
.container {
  ::v-deep {
    .c-demo-block {
      &__title {
        padding-left: $padding-md;
      }
    }
  }
}
</style>
